<template>
  <div class="currentBox">
    <!-- 头部 -->
    <div class="topPart">
      <div class="backBtn" @click="back()"> <svg-icon class-name="back-icon" icon-class="back" /><span>返回</span></div>
      <div class="topMainTitle">课堂数据分析</div>
      <div class="topRight">
        <span>采样间隔时间：{{ interval }}次/5秒</span>
        <span>2024-10-10 12:00:00</span>
      </div>
    </div>
    <!-- 课程信息 -->
    <div class="classBtnLine">
      <div class="classInfoBtn">班级：高二4班</div>
      <div class="classInfoBtn">教师：王老师</div>
      <div class="classInfoBtn">课程：语文</div>
      <div class="classInfoBtn">学生：{{ total }}人</div>
    </div>
    <!-- 主要模块(视频+数据) -->
    <div class="mainPart">
      <div class="videoPart">
        <img :src="imgsrc" alt="">
      </div>
      <div class="dataBox" style="flex:1">
        <div class="dataBoxTitle"> <img src="../../assets/titleIcon.png" alt="">行为数据统计</div>
        <div class="innerActs">
          <div class="innerLine" style="border-bottom:1px solid #2655a7">
            <div class="roleTitle">老师</div>
            <div class="actionLine">
              <div class="actionItem"><div>教师讲授</div><div>{{ t0 }}</div></div>
              <div class="actionItem actionBg"><div>指导学生</div><div>{{ t1 }}</div></div>
              <div class="actionItem"><div>老师巡视</div><div>{{ t2 }}</div></div>
            </div>
          </div>
          <div class="innerLine">
            <div class="roleTitle">学生</div>
            <div class="actionLine">
              <div class="actionItem actionBg"><div>学生汇报</div><div>{{ s0 }}</div></div>
              <div class="actionItem"><div>师生互动</div><div>{{ s1 }}</div></div>
              <div class="actionItem actionBg"><div>生生互动</div><div>{{ s2 }}</div></div>
            </div>
          </div>
        </div>
      </div>
      <div class="dataBox dataBoxWidth1" style="padding-bottom:10px;">
        <div class="dataBoxTitle"> <img src="../../assets/titleIcon.png" alt="">教学行为分析</div>
        <fuctionLine v-if="showFunction1" :action-data="action1" />
        <fuctionLine v-if="showFunction2" :action-data="action2" />
        <fuctionLine v-if="showFunction3" :action-data="action3" />
        <fuctionLine v-if="showFunction4" :action-data="action4" />
        <fuctionLine v-if="showFunction5" :action-data="action5" />
        <fuctionLine v-if="showFunction6" :action-data="action6" />

      </div>
    </div>
    <!-- 数据分析 -->
    <div class="analysisPart">
      <div class="dataBox dataBoxWidth2" style="margin-left:0px;">
        <div class="dataBoxTitle"> <img src="../../assets/titleIcon.png" alt="">课堂时间分配</div>
        <div class="dataText">合理调整教学环节的时间分配，精讲精练，达到课堂结构的最优化，课堂效果的最佳化。</div>
        <halfCircle v-if="showPercent" :percent-data="percentData" />
      </div>
      <div class="dataBox dataBoxWidth2">
        <div class="dataBoxTitle"> <img src="../../assets/titleIcon.png" alt="">S-T教学行为分析</div>
        <lineChart v-if="showST" :st-data="stData" :grid-set="gridSet" />
      </div>
      <div class="dataBox dataBoxWidth2">
        <div class="dataBoxTitle"> <img src="../../assets/titleIcon.png" alt="">Rt-Ch图</div>
        <div class="dataBoxTwo">
          <div class="dataBoxTwo-title">Ch</div>
          <div class="dataBoxTwo-left">
            <triangleLine v-if="showRtCh" :rt-ch-data="RtChData" />

            <div class="dataBoxTwo-title2">Rt</div>
          </div>
          <div class="dataBoxTwo-rigth">
            <div class="dataBoxTwo-Tip">互动类型<span>{{ reactType }}</span></div>
            <div class="dataBoxTwo-Tip2">互动转换指数<span>{{ reactRate.toFixed(2) }}%</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import halfCircle from './charts/halfCircle.vue'
import lineChart from './charts/lineChart.vue'
import fuctionLine from './charts/fuctionLine.vue'
import triangleLine from './charts/triangleLine.vue'

// 接口
import { getDataST, getDataRtCh, getDataPfCh } from '@/api/main'

export default {
  name: 'ClassAnalysis',
  components: { lineChart, halfCircle, fuctionLine, triangleLine },
  data() {
    return {
      id: null,
      total: 45,
      imgsrc: require('../../assets/img001.png'),
      interval: this.$route.query.interval,
      listenNum: 30,
      writenNum: 30,
      replyNum: 40,
      sleepNum: 10,
      reactNum: 20,
      // 没有数据时图表不显示，防止加载完成时还没获得数据
      showST: false,
      showRtCh: false,
      length: null,
      gridSet: {
        max: null,
        interval: null
      },
      showFunction1: false,
      showFunction2: false,
      showFunction3: false,
      showFunction4: false,
      showFunction5: false,
      showFunction6: false,
      // 传递给图表的数据
      action1: { },
      action2: { },
      action3: { },
      action4: { },
      action5: { },
      action6: { },
      action7: {//
        categories: ['xxxx'], // name
        itemColor: '#329932', // 颜色
        data: [// 数据
          ['1', 1],
          ['2', 0],
          ['3', 0],
          ['4', 0],
          ['5', 0],
          ['6', 0],
          ['7', 0],
          ['8', 0],
          ['9', 0],
          ['10', 1],
          ['11', 1],
          ['12', 1],
          ['13', 1],
          ['14', 1],
          ['15', 1],
          ['16', 1],
          ['17', 1],
          ['18', 1],
          ['19', 1],
          ['20', 1],
          ['21', 1],
          ['22', 1],
          ['23', 1],
          ['24', 1],
          ['25', 1],
          ['26', 0],
          ['27', 0],
          ['28', 0],
          ['29', 0],
          ['30', 0],
          ['31', 0],
          ['32', 0],
          ['33', 0],
          ['34', 1],
          ['35', 1],
          ['36', 0],
          ['37', 0],
          ['38', 1],
          ['39', 0],
          ['40', 1],
          ['41', 1],
          ['42', 0],
          ['43', 1],
          ['44', 1],
          ['45', 0]
        ]
      },
      percentData: {
        s_time: null,
        t_time: null,
        percent: []
      },
      showPercent: false,
      reactType: '', // 互动类型
      reactRate: '', // 互动转换指数
      // 行为数据
      t0: null,
      t1: null,
      t2: null,
      s0: null,
      s1: null,
      s2: null
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    },

    Percent() {
      return (e) => {
        const num = e / this.total * 100
        return num.toFixed(2)
      }
    }
  },
  created() {
    // 获取query缓存
    this.setQuery()
    // 获取st的数据
    this.getDataForST()
    // 获取rtch
    this.getDataForRtCh()
    // 获取性能
    this.getDataForPfCh()
  },

  beforeDestroy() {

  },
  methods: {
    // 设置缓存
    setQuery() {
      const params = this.$route.query
      //  console.log('--------params',params)

      if (Object.keys(params).length === 0) {
        const savedParams = JSON.parse(localStorage.getItem('queryParams'))
        if (savedParams) {
          this.$router.replace({ query: savedParams })
        }
      } else {
        localStorage.setItem('queryParams', JSON.stringify(params))
      }
    },
    back() {
      // this.$router.back()
      this.$router.push({ path: '/classList' })
    },
    // 获取St数据
    getDataForST() {
      const id = this.$route.query.id
      getDataST(id).then(response => {
        this.stData = response.data.st_data
        console.log('--------response.data', response.data)
        // this.length=response.data.duration
        this.setChartGrid(response.data.duration)
        this.showST = true
        // 课堂百分比
        const s_percent = Number((response.data.s_percent * 100).toFixed(1))
        const t_percent = 100 - s_percent
        const sTime = Number((response.data.duration / 60 * s_percent / 100).toFixed(0))
        const tTime = Number((response.data.duration / 60 * t_percent / 100).toFixed(0))
        this.percentData = {
          s_time: sTime,
          t_time: tTime,
          s_percent: s_percent,
          t_percent: t_percent
        }
        this.showPercent = true
      })
    },
    // ST图表样式间隔计算
    setChartGrid(length) {
      if (length <= 900) {
        this.gridSet.max = 900
        this.gridSet.interval = 60
      } else if (length > 900 && length <= 1800) {
        this.gridSet.max = 1800
        this.gridSet.interval = 120
      } else if (length > 1800 && length <= 2700) {
        this.gridSet.max = 2700
        this.gridSet.interval = 180
      } else if (length > 2700 && length <= 3600) {
        this.gridSet.max = 3600
        this.gridSet.interval = 300
      } else {
        const roundNum = Math.ceil(length / 50)
        this.gridSet.max = roundNum * 50
        this.gridSet.interval = (roundNum * 50) / 10
      }
    },

    // 获取性能数据
    getDataForPfCh() {
      const id = this.$route.query.id
      getDataPfCh(id).then(response => {
        //
        this.action1 = {
          categories: ['教师讲授'], // name
          itemColor: '#993232', // 颜色
          data: response.data.t0
        }
        this.showFunction1 = true
        //
        this.action2 = {
          categories: ['指导学生'], // name
          itemColor: '#2d90f9', // 颜色
          data: response.data.t1
        }
        this.showFunction2 = true
        //
        this.action3 = {
          categories: ['老师巡视'], // name
          itemColor: '#7d9932', // 颜色
          data: response.data.t2
        }
        this.showFunction3 = true
        //
        this.action4 = {
          categories: ['学生汇报'], // name
          itemColor: '#24b8c9', // 颜色
          data: response.data.s0
        }
        this.showFunction4 = true
        //
        this.action5 = {
          categories: ['师生互动'], // name
          itemColor: '#c84ae3', // 颜色
          data: response.data.s1
        }
        this.showFunction5 = true
        //
        this.action6 = {
          categories: ['生生互动'], // name
          itemColor: '#e0c92e', // 颜色
          data: response.data.s2
        }
        this.showFunction6 = true
        // 行为数据
        this.t0 = response.data.t0_count
        this.t1 = response.data.t1_count
        this.t2 = response.data.t2_count
        this.s0 = response.data.s0_count
        this.s1 = response.data.s1_count
        this.s2 = response.data.s2_count
      })
    },

    // 获取rtch数据
    getDataForRtCh() {
      const id = this.$route.query.id
      getDataRtCh(id).then(response => {
        this.showRtCh = true
        this.RtChData = [[response.data[0], response.data[1]]]
        // 互动类型
        const x = response.data[0]
        const y = response.data[1]
        if (x > 0 && x <= 0.3 && y > 0 && y <= 0.6) {
          this.reactType = '练习型'
        } else if (x > 0.3 && x <= 0.7 && y > 0 && y <= 0.4) {
          this.reactType = '混合型'
        } else if (x > 0.7 && y <= 1 && y > 0 && y <= 0.6) {
          this.reactType = '讲授型'
        } else {
          this.reactType = '对话型'
        }
        // 互动转换指数
        this.reactRate = y * 100
      })
    }
  }
}
</script>

